<div data-role="page" id="tutoriel" data-theme="c">
		<div data-role="content" data-theme="c" id="tutorielContent">
			<?php if ($lang=='FR'): ?>
				<div id="tutoFR" style="position: absolute; left: 5%">
					<H3> Bienvenue ! </h3>
					<div id='parties'>
						<div id="partie0">Le site propose des phrases aléatoires que vous pouvez
						manipuler vous-même. <br>
						Pour changer de phrase, vous pouvez déplacer la phrase vers la gauche
						ou la droite et celle-ci sera automatiquement remplacée par une autre.
						Vous pouvez aussi taper très vite deux fois votre écran pour modifier
						la phrase et l'éditer vous même. <br>
						<img src="flecheGauchesstext.png" alt=""/> </div>
						<div id="partie1">Lorsque vous avez choisi votre phrase, vous pouvez modifier
						les mots qui la composent en touchant ceux-ci brièvement. <br>
						Le mot sera alors remplacé par un synonyme. <br>
						<img src="flecheGauchesstext.png" alt=""/> <img src="flecheDroitesstext.png" alt=""/> </div>
						<div id="partie2">Si vous souhaitez choisir le synonyme, vous pouvez toucher
						le mot plus <br>
						Longtemps : une liste de synonymes s'affichera alors, et vous pourrez
						choisir le synonyme qui vous convient en faisant glisser votre doigt
						vers le haut ou vers le bas. Vous pouvez aussi supprimer un mot en
						choisissant la dernière option de la liste qui s'affiche. <br>
						<img src="flecheGauchesstext.png" alt=""/> <img src="flecheDroitesstext.png" alt=""/> </div>
						<div id="partie3">Enfin, si vous voulez remplacer d’un seul coup tous les
						mots de la phrase <br>
						Chacun par un synonyme, vous pouvez secouer votre écran. <br>
						<img src="flecheGauchesstext.png" alt=""/> <img src="flecheDroitesstext.png" alt=""/> </div>
						<div id="partie4">Vous pouvez dès à présent vous lancer et créer les phrases
						les plus <br>
						Signifiantes ou les plus farfelues en jouant sur les synonymes !" <br>
						<img src="flecheGauchesstext.png" alt=""/> <img src="flecheDroitesstext.png" alt=""/> </div>
					</div>
				</div>
			<?php else: ?>
				<div id="tutoEN">
					<H3> Welcome ! </h3>
					<div id='parties'>
						<div id="partie0">This website proposes several sentences which you can
						manipulate with your own fingers. <br>
						You can change the sentence by swiping it left for the next sentence, or
						right for the previous sentence. <br>
						You can also double tap the screen to create your
						own sentence.  <br>
						<img src="flecheGauchesstext.png" alt=""/> </div>
						<div id="partie1">When you have chosen your sentence, you can change its
						meaning by touching briefly any long word (more than 3 letters). <br>
						This word will then be replaced by a synonym.  <br>
						<img src="flecheGauchesstext.png" alt=""/> <img src="flecheDroitesstext.png" alt=""/> </div>
						<div id="partie2">If you prefer, you can choose the synonym yourself. <br>
						By tapholding on a word, a list containing all the possible
						synonyms will appear. <br>
						While it is visible, you may scroll up and down to select any synonym. <br>
						<img src="flecheGauchesstext.png" alt=""/> <img src="flecheDroitesstext.png" alt=""/> </div>
						<div id="partie3">The list of synonyms also allows you to delete a word. <br>
						By selecting the last item on the list - a small cross - the word you
						tapholded on will be removed.  <br>
						<img src="flecheGauchesstext.png" alt=""/> <img src="flecheDroitesstext.png" alt=""/> </div>
						<div id="partie4">Last but not least, you can use your phone's or tablet's
						accelerometer to interact with the website. <br>
						Just shake your phone and all the words in the sentence will be
						replaced by synonyms chosen randomly.  <br>
						<img src="flecheGauchesstext.png" alt=""/> <img src="flecheDroitesstext.png" alt=""/> </div>
					</div>
				</div>
			<?php endif; ?>
		</div>
		<div data-role="footer" data-theme="c" style="position: fixed;bottom: 0;">
			<?php if ($lang=='FR'): ?>
				<a href="index" data-role="button" data-theme="c" data-transition="pop" data-direction="reverse">
					<div id="backFR"><h3>Retour</h3></div>
				</a>
			<?php else: ?>
				<a href="index" data-role="button" data-theme="c" data-transition="pop" data-direction="reverse">
					<div id="backEN"><h3>Back</h3></div>
				</a>
			<?php endif; ?>
		</div>
	</div>
